<template>
    <div>
        <div class="float-left">
            <el-input
                placeholder="输入字段名称搜索"
                style="width:200px"
                @keyup.enter.native="searchField"
                v-model="filterText"
            >
                <i
                    class="el-icon-search"
                    slot="suffix"
                    style="margin-top:10px;cursor:pointer"
                    @click="searchField"
                ></i>
            </el-input>
        </div>
        <div class="float-right opr-btn">
            <el-button @click="checkConfig" type="primary">检查配置</el-button>
            <el-button @click="saveData" type="primary">{{$t("message.save")}}</el-button>
            <el-dropdown @command="handleCommand">
                <el-button type="primary">
                    {{$t("message.import")}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="download">下载模板</el-dropdown-item>
                    <el-dropdown-item command="import">导入数据</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="table-header">
            <table cellpadding="0">
                <colgroup>
                    <col width="80px"/>
                    <col width="220px"/>
                    <col
                        v-for="(item, i) in operatesData"
                        :key="i"
                        :style="i==5?{width:'300px'}:{width:'140px'}"
                    />
                </colgroup>
                <thead>
                    <th width="80px">序号</th>
                    <th width="80px">字段</th>
                    <th
                        v-for="(item, i) in operatesData"
                        :key="i"
                        :style="i==5?{textAlign:'left',textIndent:'18px'}:null"
                    >
                        <span>{{item.name}}</span>
                    </th>
                </thead>
            </table>
        </div>
        <div class="table-body">
            <table cellpadding="0">
                <colgroup>
                    <col width="80px"/>
                    <col width="220px"/>
                    <col
                        v-for="(item, i) in operatesData"
                        :key="i"
                        :style="i==5?{width:'300px'}:{width:'140px'}"
                    />
                </colgroup>
                <tbody>
                    <tr v-for="(item, i) in tableData" :key="i">
                        <td
                            v-for="(ele, j) in item"
                            :key="j"
                            :style="j==7?{textAlign:'left',textIndent:'15px'}:null"
                        >
                            <div v-if="j==0" style="text-align:center">
                                <span>{{ele.name}}</span>
                            </div>
                            <div v-else-if="j == 1" style="text-align:center">
                                <el-tooltip
                                    class="item"
                                    effect="light"
                                    :content="ele.name"
                                    placement="top"
                                >
                                    <span style="cursor:pointer">{{getFieldName(ele.name)}}</span>
                                </el-tooltip>
                            </div>
                            <template v-else>
                                <el-checkbox
                                    v-model="ele.name"
                                    size="mini"
                                    @change="checkChange(i, j)"
                                ></el-checkbox>
                            </template>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table-footer">
            <span v-if="tableData.length == 0">暂无数据</span>
        </div>
    </div>
</template>
<script>
import { checkSelectedFile } from "common/src/api/studentinfo";
export default {
    name: "FieldAuthority",
    props: ["tableData", "operatesData"],
    data() {
        return {
            rows: [],
            filterText: null
        };
    },
    mounted() {},
    methods: {
        saveData() {
            this.$emit("save-data");
        },
        checkChange(row, col) {
            this.statusChange(row, col);
            const isChecked = event.srcElement.checked;
            const canEditCol = [3, 5, 7];
            if (col == 8 || col == 9) {
                // //校审选中时，院审勾中
                // if (col == 9 && isChecked) {
                //     this.$props["tableData"].forEach((ele, i) => {
                //         if (row == i) {
                //             ele.forEach((item, j) => {
                //                 if (j == 8 && !item.name) {
                //                     item.name = isChecked;
                //                     this.statusChange(i, j);
                //                 }
                //             });
                //         }
                //     });
                // }
                // //院审取消时，校审取消
                // if (col == 8 && !isChecked) {
                //     this.$props["tableData"].forEach((ele, i) => {
                //         if (row == i) {
                //             ele.forEach((item, j) => {
                //                 if (j == 9 && item.name) {
                //                     item.name = isChecked;
                //                     this.statusChange(i, j);
                //                 }
                //             });
                //         }
                //     });
                // }
            } else if (canEditCol.indexOf(col) >= 0 && isChecked) {
                //选中为可改时，可见也选中
                const curIndex = col - 1;
                this.$props["tableData"].forEach((ele, i) => {
                    if (row == i) {
                        ele.forEach((item, j) => {
                            if (j == curIndex && !item.name) {
                                item.name = isChecked;
                                this.statusChange(i, j);
                            }
                        });
                    }
                });
            } else if (canEditCol.indexOf(col + 1) >= 0 && !isChecked) {
                //可见取消时，可改也取消
                const curIndex = col + 1;
                this.$props["tableData"].forEach((ele, i) => {
                    if (row == i) {
                        ele.forEach((item, j) => {
                            if (j == curIndex && item.name) {
                                item.name = isChecked;
                                this.statusChange(i, j);
                            }
                        });
                    }
                });
            }
        },
        //设置状态
        statusChange(row, col) {
            this.tableData[row][col].status = this.tableData[row][col].status
                ? 0
                : 1;
        },
        searchField() {
            this.$emit("search");
        },
        clearFilterText() {
            this.filterText = null;
        },
        getFilterText() {
            return this.filterText;
        },
        handleCommand(command) {
            if (command == "download") {
                this.$emit("download");
            } else {
                this.$emit("upload");
            }
        },
        getFieldName(name) {
            // if (name.length > 4) {
            //     return name.substr(0, 4) + "...";
            // } else {
            //     return name;
            // }
            return name;
        },
        checkConfig() {
            checkSelectedFile().then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: "所有字段已配置",
                        type: "success"
                    });
                }
            });
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.opr-btn {
    overflow: auto;
    margin-bottom: 20px;
}
.table-header {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #fff;
    table {
        width: 100%;
        th {
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
            line-height: 42px;
            color: #777;
            text-align: center;
        }
    }
}
.table-footer {
    line-height: 42px;
    text-align: center;
    color: #909399;
}
.table-body {
    width: 100%;
    overflow-y: auto;
    table {
        width: 100%;
        tr {
            line-height: 32px;
            border-bottom: 1px solid #eee;
        }
        tr:nth-child(2n + 1) {
            background: #fcfcfc;
        }
        td {
            font-size: 12px;
            text-align: center;
            i {
                font-size: 14px;
            }
            div {
                text-align: left;
            }
        }
    }
}
</style>
